<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui-v2.6.8/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/ext.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3564966_a6tt4yhnzge.css" media="all">
    <link rel="stylesheet" href="../plugins/toastr/toastr.min.css?v=${.Config.basic.version}">

    <link rel="stylesheet" href="../plugins/jquery-step/jquery.step.css?v=${.Config.basic.version}" media="all">
    <style>
        .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 5px 0;
            border-top: 1px solid #404453;
            border-left: 1px solid #404453;
            border-bottom: 1px solid #404453;
            border-right: 1px solid #404453;
        }
        .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
        .layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
    </style>
    <style>
        .layui-form-label-lg {
            width: 150px;
        }

        .ui-step-wrap .ui-step .ui-step-item div {
            text-align: center;
            color: #899eb2;
        }
        button {
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            text-align: center;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #fff;
            background-color: #4958b9;
        }
        
        .main {
            width: 750px;
            margin: 10px auto;
        }
        
        #step {
            margin-bottom: 20px;
        }
        
        .btns {
            float: left;
        }
        
        .info {
            float: left;
            height: 34px;
            line-height: 34px;
            margin-left: 40px;
            font-size: 28px;
            font-weight: bold;
            color: #928787;
        }
        
        .info span {
            color: red;
        }
    </style>
</head>
<body>

    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="form_search" id="form_search" action="">
                <div class="layui-form-item">


                    <div class="layui-inline">
                        <!--<label class="layui-form-label auto-size-label"></label>-->
                        <div class="layui-input-inline">
                            <input type="text" name="txt_key" placeholder="请输入关键字" lay-verify="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>查询</button>
                        <!--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm action-export layui-hide" lay-submit="" lay-filter="btn_search"><i class="fa fa-file-excel-o"></i> 导出</button>-->
                    </div>

                    <div class="layui-inline fr">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal action-edit layui-hide" lay-submit="add" lay-filter="add"><i class="layui-icon layui-icon-release"></i>更换饲喂器</button>
                    </div>

                </div>
            </form>

            <table class="layui-hide" id="table" lay-filter="table"></table>
        </div>
    </div>

    

    


</body>


<script src="../plugins/jquery/jquery-3.6.0.js?v=${.Config.basic.version}"></script>
<script src="../plugins/layui-v2.6.8/layui/layui.js"></script>
<script src="../plugins/jquery.slimscroll.min.js"></script>
<script src="../plugins/toastr/toastr.min.js"></script>
<script src="../plugins/moment.min.js"></script>
<script src="../plugins/jquery-step/jquery.step.min.js?v=${.Config.basic.version}"></script>
<script src="../js/utils.js?v=${.Config.basic.version}"></script>
<script src="../js/func.js?v=${.Config.basic.version}"></script>
<script>
    var table=null;
    var form=null;
    var Table=null;
    var element = null;
    var sys_roles=null;
    var lay_index = null;
    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var dictionary=JSON.parse(window.localStorage.getItem("dictionary"));
    var func_url="${.func_url}";
    var actions=[];
    token = 'Bearer ' + token;

    var $step = null;

    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','layer','form', 'table','transfer','laydate','element','dropdown'],function(){

        $ = layui.$;
        form = layui.form;
        table = layui.table;
        element = layui.element;

        toastr.options = {
            "closeButton": false, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "positionClass": "toast-top-center",//弹出窗的位置
            "showDuration": "300",//显示的动画时间
            "hideDuration": "1000",//消失的动画时间
            "timeOut": "2000", //展现时间
            "extendedTimeOut": "1000",//加长展示时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
        };

        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        //监听提交
        form.on('submit(btn_search)', function(data){
            //layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})
            search({key:data.field.txt_key});
            return false;
        });

        form.on('submit(add)', function(data){

            $(".step-box").hide();
            $(".step-0").show();

            lay_index = layer.open({
                //area: 'auto',
                area:['780px','500px'],
                type: 1,
                shade: 0.5,
                offset: '15%',
                shadeClose:true,
                title: '增加', //不显示标题
                content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                
            });

            if(!$step){
                $step = $("#step");
                $step.step({
                    index: 0,
                    time: 500,
                    title: ["填写信息","备份数据", "注册新饲喂器", "网关兼容更新", "升级饲喂器","网关更新","还原参数", "完成"]
                });
            }
            

            return false;
        });

        form.on('submit(btn_ok)', function(data){
            console.info(data.field);
            if(data.field.old_sn.length!=8){
                toastr.warning("饲喂器SN错误", "提示");
                return;
            }
            if(data.field.new_sn.length!=8){
                toastr.warning("饲喂器SN错误", "提示");
                return;
            }

            layer.load(1);
            $.ajax({
                type: "POST",
                url:'../Api/Device/FeednodeReplace',
                data: data.field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        layer.close(lay_index);
                        search();
                    }else{
                        layer.close(lay_index);
                        layer.alert(res.msg);
                        toastr.warning(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        });

        Table = table.render({
            elem: '#table'
            //,data:data
            ,url:'../Api/Device/FeednodeReplace/Page'
            ,height: 'full-90'
            ,method:'GET'
            ,headers : {'Authorization': 'Bearer '+window.localStorage.getItem("token")}
            ,where: {}
            ,page: {
                limit:50,
                limits:[10, 20, 30, 40, 50,100,200,300,400],
                theme: '#3c7cff'
            }
            //,limit:30
            //,toolbar: '#user_table_toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['']
            ,title: ''
            ,even:false
            ,size: 'sm' //小尺寸的表格
            ,skin: 'nob' //无框风格
            ,cols: [[
                {field:'id', title:'id',hide:true}
                ,{field:'farmname', title:'场区',sort: true}
                ,{field:'housename', title:'单元',sort: true}
                ,{field:'hnum', title:'栏位',sort: true, width:80}
                ,{field:'old_sn', title:'旧饲喂器SN', width:120,sort: true}
                ,{field:'new_sn', title:'新饲喂器SN', width:120,sort: true}
                ,{field:'reason', title:'更换原因', width:120,sort: true}
                ,{field:'step', title:'系统处理进度',sort: false, width:250, templet: function(d) {
                    var html = "";
                    var color="";
                    var bgColor="";
                    var desc="";
                    if(d.step==1){
                        desc="备份&重置数据";
                    }else if(d.step==2){
                        desc="注册新饲喂器";
                    }else if(d.step==3){
                        desc="网关兼容更新";
                    }else if(d.step==4){
                        desc="升级饲喂器";
                    }else if(d.step==5){
                        desc="网关更新";
                    }else if(d.step==6){
                        desc="还原参数";
                    }else if(d.step==7){
                        desc="完成";
                    }

                    if(d.status){
                        if(d.status=='unprocess'){
                            desc+=" 待处理 ";
                        }
                        else if(d.status=='process'){
                            desc+=" 处理中 ";
                        }
                        else if(d.status=='done'){
                            desc+="  ";
                        }
                        else if(d.status=='err'){
                            desc+=" 异常结束 ";
                        }
                    }
                    var per = parseFloat(d.step)/parseFloat(7)*100;
                    per = parseFloat(per.toFixed(1).toString()).toString();
                    var per_str = "("+per+"%)";

                    if(d.step>=7){
                        color="layui-text-green-light";
                        bgColor="layui-bg-green";
                    }else if(d.step>=0 && d.step<7){
                        color="layui-text-orange";
                        bgColor="layui-bg-orange";
                    }else{
                        color="layui-text-orange";
                        bgColor="layui-bg-orange";
                    }

                    html = "<span lay-event=\"view\" class='layui-text-xs hand "+color+"'>"+ desc+"("+d.step+"/7)"+"</span>";
                    html+="<div class='layui-progress' lay-event=\"view\"><div class='layui-progress-bar "+bgColor+"'  lay-percent='"+per+"%'></div></div>";
                    return html;
                }}
                
                ,{field:'create_date', title:'操作时间', width:160,align:'center', sort: true}
                ,{field:'create_user', title:'操作人员', width:100,align:'center', sort: false}
                ,{field:'', title:'操作', width:120,sort: false,align:'left', templet: function(d) {
                    var html = "";
                    html += "<a href='#'   class=\"layui-hide action-view\" lay-event=\"view\"><span class=\"  text-underline\">详情</span></a>";
                    if(d.step<7){
                        html += "<span class=\"shortGreyLine\"></span><a href='#'   class=\"layui-hide action-delete\" lay-event=\"delete\"><span class=\"  layui-text-orange text-underline\">删除</span></a>";
                    }
                    
                    
                    return html;
                }}
            ]]
            ,done: function(res, curr, count){
                element.render();
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            }
        });

        table.on('sort(table)', function(obj){
            for(var i=0;i<actions.length;i++){
                $('.action-'+actions[i].action_id).removeClass("layui-hide");
            }
        });

        //头工具栏事件
        table.on('toolbar(table)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2
                        ,title: '上传'
                        ,content: '/Admin/FirmwareUpload'
                        ,maxmin: true
                        ,area: ['550px', '550px']
                        ,offset: '100px'
                        ,btn: ['关闭']
                        ,yes: function(index, layero){
                            //点击确认触发 iframe 内容中的按钮提交
                            var submit = layero.find('iframe').contents().find("#btn_ok");
                            submit.click();
                        }
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(table)', function(obj){
            var item = obj.data;
            //console.log(data)
            if(obj.event === 'view'){
                onView(item);
            }else if(obj.event === 'delete'){
                onDelete(item);
            }
        });


        

        

        //$index.text($step.getIndex());
        $("#prevBtn").on("click", function() {
            $step.prevStep();
            $index.text($step.getIndex());
        });

        $("#nextBtn").on("click", function() {
            $step.nextStep();
            $index.text($step.getIndex());
        });
    });

    function onView(item){
        
        $(".step-box").hide();
        $(".step-"+item.step).show();

        lay_index = layer.open({
            //area: 'auto',
            area:['780px','500px'],
            type: 1,
            shade: 0.5,
            offset: '15%',
            shadeClose:true,
            title: '详情', //不显示标题
            content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            
        });


        if(!$step){
            $step = $("#step");
            $step.step({
                index: 0,
                time: 500,
                title: ["填写信息","备份数据", "注册新饲喂器", "网关兼容更新", "升级饲喂器","网关更新","还原参数", "完成"]
            });
            $step.toStep(item.step);// 跳到指定步骤
        }else{
            console.info(item);
            $step.toStep(item.step);// 跳到指定步骤
        }
    }

    function onDelete(item){
        layer.confirm('确定删除'+item.housename+" "+item.hnum+"?", function(index){
            layer.load(1);
            $.ajax({
                type: 'DELETE',
                url: '../Api/Device/FeednodeReplace',
                data: item,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    //console.info(data)
                    if(res.code==0){
                        toastr.success("删除成功");
                        layui.table.reload('table'); //重载表格
                        layer.close(index); //再执行关闭
                    }else{
                        layer.alert('失败:'+res.msg);
                        toastr.warning(res.msg, "异常");
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },
            });
        });
    }
    function search(params) {
        Table.reload({
            where: params
        });
    }

</script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>


<form class="layui-form" lay-filter="form" id="form" style="display:none;">
    <div class="main">
        
        <div id="step"></div>

        <div class="layui-card step-box step-0" style="display: none;">
            <!-- <div class="layui-card-header"></div> -->
            <div class="layui-card-body">

                <form class="layui-form" lay-filter="form">
                    <div class="layui-form-item">
                        <!-- <label class="layui-form-label layui-form-label-lg"></label> -->
                        <span class="layui-text-orange layui-text-sm" style="padding: 9px 15px;"><i class="layui-icon layui-icon-tips"></i> 请确保智能网关在线,旧饲喂器已经拆下且新的饲喂器已经安装接线。</span>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-lg"><span class="layui-text-red">*</span> 原饲喂器SN</label>
                        <div class="layui-input-inline">
                            <input type="text" name="old_sn" lay-verify="number" maxlength="8" lay-verType="tips" autocomplete="off" placeholder="8位饲喂器SN" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-lg"><span class="layui-text-red">*</span> 新饲喂器SN</label>
                        <div class="layui-input-inline">
                            <input type="text" name="new_sn" lay-verify="number" maxlength="8" lay-verType="tips" autocomplete="off" placeholder="8位饲喂器SN" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-lg"><span class="layui-text-red">*</span> 更换原因</label>
                        <div class="layui-input-inline">
                            <select name="reason" lay-filter="reason" lay-verify="required" lay-search=""  >
                                <option value="黑屏">黑屏</option>
                                <option value="运行异常">运行异常</option>
                                <option value="无法启动">无法启动</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-lg"></label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal action-edit" lay-submit lay-filter="btn_ok">保存</button>
                            <!-- <button type="button" class="layui-btn layui-btn-warm action-edit" lay-submit lay-filter="btn_ok">取消</button> -->
                        </div>
                    </div>

                </form>

            </div>
        </div>

        <div class="layui-card step-box step-1" style="display: none;">
            <div class=" text-center" >
                <p><i class="layui-icon layui-icon-log layui-text-orange" style="font-size: 100px;"></i></p>
                <p class="text-center layui-text-gray pd-lg">正在执行:备份&重置数据</p>
            </div>
        </div>

        <div class="layui-card step-box step-2" style="display: none;">
            <div class=" text-center" >
                <p><i class="layui-icon layui-icon-log layui-text-orange" style="font-size: 100px;"></i></p>
                <p class="text-center layui-text-gray pd-lg">正在执行:注册新饲喂器</p>
            </div>
        </div>

        <div class="layui-card step-box step-3" style="display: none;">
            <div class=" text-center" >
                <p><i class="layui-icon layui-icon-log layui-text-orange" style="font-size: 100px;"></i></p>
                <p class="text-center layui-text-gray pd-lg">正在执行:网关兼容更新</p>
            </div>
        </div>

        <div class="layui-card step-box step-4" style="display: none;">
            <div class=" text-center" >
                <p><i class="layui-icon layui-icon-log layui-text-orange" style="font-size: 100px;"></i></p>
                <p class="text-center layui-text-gray pd-lg">正在执行:升级饲喂器</p>
            </div>
        </div>

        <div class="layui-card step-box step-5" style="display: none;">
            <div class=" text-center" >
                <p><i class="layui-icon layui-icon-log layui-text-orange" style="font-size: 100px;"></i></p>
                <p class="text-center layui-text-gray pd-lg">正在执行:网关更新</p>
            </div>
        </div>

        <div class="layui-card step-box step-6" style="display: none;">
            <div class=" text-center" >
                <p><i class="layui-icon layui-icon-log layui-text-orange" style="font-size: 100px;"></i></p>
                <p class="text-center layui-text-gray pd-lg">正在执行:还原参数</p>
            </div>
        </div>

        <div class="layui-card step-box step-7" style="display: none;">
            <div class=" text-center" >
                <p><i class="layui-icon layui-icon-ok-circle layui-text-green" style="font-size: 100px;"></i></p>
                <p class="text-center layui-text-white pd-lg">已经全部成功完成！</p>
            </div>
        </div>
    </div>
</form>
</html>